<template>
  <div class="Collection">
      <span class="iconfont icon-fangxianganniu2 back" @click="$router.go(-1)"></span>
    <van-tabs v-model="active">
      <van-tab title="MV">
        <div v-if="mv !== null" class="mv">
          <ul>
            <li v-for="ele in mv" :key="ele.vid" @click="playMV(ele.vid)">
              <div class="imgbox">
                <img :src="ele.coverUrl" alt="" />
                <span>{{ ele.playTime | playCountData }}</span>
              </div>
              <h3>{{ ele.title }}</h3>
            </li>
          </ul>
        </div>
      </van-tab>
      <van-tab title="歌手">
        <div v-if="singer !== null" class="mv">
          <ul>
            <li v-for="ele in singer" :key="ele.id" @click="singerhome(ele.id)">
              <div class="imgbox">
                <img :src="ele.img1v1Url" alt="" />
              </div>
              <h3>{{ ele.name }}</h3>
            </li>
          </ul>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getmvplay, getCollectSinger } from "../api/userCollection";
export default {
  data() {
    return {
      active: "MV",
      mv: null,
      singer: null,
    };
  },
  methods: {
    playMV(id) {
      this.$emit("getMvPlayerId", id);
      document.querySelector(".mvplayer").webkitRequestFullscreen(); //触发div全屏
    },
    singerhome(id) {
      this.$router.push({
        name: "SingerDetails",
        params: {
          id: id,
        },
      });
    },
  },
  created() {
    getmvplay().then((data) => {
      this.mv = data.data;
    });
    getCollectSinger().then((data) => {
      this.singer = data.data;
      console.log(data);
    });
  },
  // 过滤器
  filters: {
    playCountData(value) {
      let w = value > 10000 ? value / 10000 : value; // 万计算
      let y = w > 10000 ? parseInt(value / 10000) + "亿" : parseInt(w) + "万"; //亿计算
      return y;
    },
  },
};
</script>

<style lang="less" scoped>
.Collection{
    position: relative;
    .back{
        position: absolute;
        left: 8px;
        top: 14px;
        color: #000;
        z-index: 100;
        font-weight: 700;
    }
}
.mv {
  padding: 24px 16px 0 16px;
  li {
    display: flex;
    margin-bottom: 10px;
    .imgbox {
      position: relative;
      width: 152px;
      height: 86px;
      margin-right: 10px;
      border-radius: 8px;
      overflow: hidden;
      span {
        position: absolute;
        right: 5px;
        bottom: 5px;
        color: #fff;
        font-size: 12px;
      }
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    h3 {
      width: 172px;
      font-size: 14px;
      padding: 20px 0;
      font-weight: 700;
    }
  }
}
</style>